 <template>
  <div class="view-container">

    <table-search-view :search-items="searchItems" :table-items="tableItems" :search-function="search">
      <template slot="action" slot-scope="scope">
        <action-info :scope="scope"></action-info>
      </template>
    </table-search-view>

  </div>
</template>

<script>
  import TableSearchView from '@/components/TableSearchView';

  import actionOrderInfo from './components/actionOrderInfo.vue';
  import {getOrderOverdueList} from '@/api/order';

  export default {
    name: 'orderLeaseOverdue', /*逾期账单*/
    components: {
      'table-search-view':TableSearchView,
      'action-info':actionOrderInfo,
    },
    data ()
    {
      return {
        searchItems: [
          {
            label: '商品名称',
            type: 'autocomplete',
            placeholder:'请输入商品名称',
            model:'goodName',
          },
          {
            label: '逾期时间',
            type: 'datetimerange',
            placeholder:'请选择逾期时间',
            model:'timeRange',
          },
          {
            label: '订单编号',
            type: 'input',
            placeholder:'请输入订单编号',
            model:'orderId',
          },
          {
            label: '下单用户',
            type: 'input',
            placeholder:'请输入下单用户',
            model:'userName',
          },
          {
            label: '逾期状态',
            type: 'select',
            placeholder:'请选择逾期状态',
            model:'state',
            options:[{
              label:'逾期已付',
              value:'overdue_paid',
            },
            {
              label:'逾期未付',
              value:'overdue_unpaid',
            }]
          }
        ],
        tableItems:[
          {
            label:'订单编号',
            prop:'orderNumber',
            width:'180px;',
          },
          {
            label:'商品名称',
            prop:'goodsName',
            width:'180px;',
            sortable:true,
          },
          {
            label:'下单用户',
            prop:'userName',
            width:'180px;',
            sortable:true,
          },
          {
            label:'逾期租期',
            prop:'paymentNo',
            width:'120px;',
          },
          {
            label:'逾期违约金',
            prop:'delayAmount',
            sortable:true,
            width:'140px;',
            formatter:'parsePrice',
          },
          {
            label:'逾期状态',
            prop:'billStateStr',
            width:'120px;',
            sortable:true,
          },
          {
            label:'逾期时间',
            prop:'delayStarTime',
            width:'180px;',
            formatter:'parseTime',
          },
          {
            type:'scope',
            label:'操作',
            slot:'action',
          },
        ],
      }
    },
    methods: {
      search(data)
      {
         return getOrderOverdueList(data);
         /*return new Promise(resolve => {
          let resp = {data:{total:10, list:[
            {
              "id": 54055,
              "orderId": 54338,
              "goodsName": "Enns4l4o6m",
              "userName": "EN4yzkfm6n",
              "paymentNo": "3/12",
              "delayAmount": 74678,
              "billState": "lyEYUFXxYn",
              "billStateStr": "逾期未付",
              "delayStarTime": 1505972595992
            },
            {
              "id": 54680,
              "orderId": 55117,
              "goodsName": "HmOTb24zGU",
              "userName": "S1jgnKHnVE",
              "paymentNo": "1/12",
              "delayAmount": 32940,
              "billState": "MUL5H3WCde",
              "billStateStr": "逾期未付",
              "delayStarTime": 1505972753854
            },
            {
              "id": 55770,
              "orderId": 55898,
              "goodsName": "v2JgFE2o7g",
              "userName": "52GwRWv4wW",
              "paymentNo": "1/1",
              "delayAmount": 22032,
              "billState": "foDx83kZgO",
              "billStateStr": "逾期已付",
              "delayStarTime": 1505973588699
            }
          ]}};

          resolve(resp);
        });*/
      }
    }
  }
</script>
